@import "ui-variables";
@import 'octicon-utf-codes';

@spacing: 3px;

linter-message {
  display: flex;
  align-items: center;
  font-size: @font-size;
  line-height: 1.2;
}

.linter-message-item {
  margin: @spacing;
}

.linter-highlight {
  flex: 0 0 auto;
  align-self: flex-start;
}

.linter-message-link {
  margin: 0 0 0 @spacing;
}

linter-message-line {
  white-space: pre-wrap; /* Enable whitespace to be maintained from the user message. */
}

linter-multiline-message {
  cursor: pointer;

  &::before {
    font-family: 'Octicons Regular';
    content: @triangle-right;
    display: inline-block;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
    height: 1em;
  }

  linter-message-line:not(:first-child) {
    display: none;
    margin-left: 1.2em;
  }

  &.expanded {
    &::before {
      content: @triangle-down;
    }

    linter-message-line:not(:first-child) {
      display: block;
    }
  }
}

linter-panel {
  display: block;
  overflow-y: auto;
  min-height: 2em;

  .linter-messages {
    padding: @spacing;
  }
}

#linter-inline {
  @linter-inline-link: fade(@base-background-color, 66%);
  @linter-inline-fg: @base-background-color;
  @linter-inline-bg: @text-color;
  margin-top: 4px;
  padding: @spacing;
  color: @linter-inline-fg;
  border-radius: @component-border-radius * 1.5;
  border-top-left-radius: 0;
  background: @linter-inline-bg;
  box-shadow: 0 1px 3px hsla(0, 0, 0%, 0.4);

  transition: opacity 300ms;
  &.transparent {
    opacity: 0.2;
  }

  // pointer arrow
  &::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    border: 4px solid;
    border-color: transparent transparent @linter-inline-bg @linter-inline-bg;
  }
  a {
    color: @linter-inline-link;
    &:last-of-type {
      padding-right: @spacing * 1.5; // a bit extra space for visual pleasing
    }
  }
}

linter-bottom-tab {
  display: inline-block;
  margin-right: -1px; // hide left border
  padding: 0 .6em;
  line-height: 1.8em;
  color: @text-color-subtle;
  border: 1px solid @button-border-color;
  background: fade(@button-background-color, 33%);
  cursor: pointer;
  vertical-align: middle;
  position: relative;

  &:active {
    background: transparent;
  }
  &.active {
    color: @text-color-highlight;
    background: @button-background-color;
  }

  .count {
    margin-left: .2em;
  }
}

atom-text-editor::shadow .linter-row {
  /* Take up the full allowed width */
  left: 0;
  right: 0;
  /* Align the linter dot in the middle */
  display: flex;
  align-items: center;
  justify-content: center;
}

atom-text-editor::shadow .linter-gutter {
  height: 0.5em !important;
  width: 0.5em;
  border-radius: 50%;
}

// Styling Error Types
atom-text-editor::shadow .linter-highlight, .linter-highlight{
  &.badge {
    border-radius: @component-border-radius;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &.error {
    &:not(.line-number){
      background-color: @background-color-error;
      color: white;
    }
    .linter-gutter{
      color: @background-color-error;
    }
    .region {
      border-bottom: 1px dashed @background-color-error;
    }
  }
  &.warning {
    &:not(.line-number){
      background-color: @background-color-warning;
      color: white;
    }
    .linter-gutter{
      color: @background-color-warning;
    }
    .region {
      border-bottom: 1px dashed @background-color-warning;
    }
  }
  &.trace, &.info {
    &:not(.line-number){
      background-color: @background-color-info;
      color: white;
    }
    .linter-gutter{
      color: @background-color-info;
    }
    .region {
      border-bottom: 1px dashed @background-color-info;
    }
  }

  // Used by bottom status icon
  &.status-error {
    color: @background-color-error;
  }
  &.status-success{
    color: @background-color-success;
  }
}

linter-bottom-status {
  margin-left: .6em;
  margin-right: 0 !important;
  &[hidden] {
    display: none;
  }
}

linter-bottom-container {
  margin-right: .6em;
}
